<template>
  <div class="comment">
    <div class="head">
      <div class="head-left">
        <div class="from">
          <n-avatar round size="small" v-if="commentDetail.fromAvatar === ''">{{
            commentDetail.fromName
          }}</n-avatar>
          <n-avatar round size="small" :src="$getAvatarUrl(commentDetail.fromAvatar)" v-else />
          <div>{{ commentDetail.fromName }} 回复</div>
        </div>
        <div class="to">
          <div>@{{ commentDetail.toName }}</div>
        </div>
      </div>
      <div class="head-right">
        <div class="time">{{ commentDetail.createTime }}</div>
      </div>
    </div>
    <div class="center">
      <div class="center-detail">
        <v-md-editor ref="markdown" :mode="'preview'" :height="'auto'" v-model="commentDetail.content"></v-md-editor>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-button">
        <div class="icon">
          <div class="like" :class="{ likely: commentDetail.isLike }" @click="likeReplay">
            <i class="iconfont" :class="{
              'icon-aixin': !commentDetail.isLike,
              'icon-aixin1': commentDetail.isLike,
            }"></i>
            <span>{{ commentDetail.likeNum }}点赞</span>
          </div>
          <div class="space"></div>
          <div class="repend">
            <n-button size="small" @click="reReplay">
              <i class="iconfont icon-pinglun"></i>
              回复
            </n-button>
          </div>
          <div class="delete" v-show="$store.oj.userData.authLevel > 0">
            <n-popconfirm positive-text="确认" negative-text="取消" @positive-click="delReplay">
              <template #trigger>
                <n-button size="small">
                  <i class="iconfont icon-shanchu"></i>
                  删除
                </n-button>
              </template>
              确认解除回复？
            </n-popconfirm>
          </div>
          <div class="foot-info classic">
            <n-popover trigger="hover" placement="right" @click="showReport()">
              <template #trigger> ... </template>
              <span class="report">举报</span>
            </n-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="all-comment"></div>
  </div>
  <el-drawer v-model="reply" :size="'50vh'" :show-close="false" :modal="false" :direction="'btt'">
    <template #header style="margin-bottom: 0px">
      <div class="head">
        <div class="head-replay">
          回复
          <span class="replay-name">@{{ commentDetail.fromName }}</span>
        </div>
        <div class="button">
          <div>
            <n-button type="info" size="small" @click="closeReply">
              取消
            </n-button>
          </div>
          <div>
            <n-button type="primary" size="small" @click="asyncAdd">
              <template #icon>
                <i class="iconfont icon-fabu"></i>
              </template>
              发布回复
            </n-button>
          </div>
        </div>
      </div>
    </template>
    <div class="markdown">
      <markdown-vue :height="'310px'" ref="comment"></markdown-vue>
    </div>
  </el-drawer>
  <el-dialog v-model="isReport" title="举报" width="35%">
    <div class="center">
      <el-radio-group v-model="reportType">
        <el-radio-button label="骚扰广告" />
        <el-radio-button label="黄色内容" />
        <el-radio-button label="暴力内容" />
        <el-radio-button label="恐怖言论" />
        <el-radio-button label="政治言论" />
        <el-radio-button label="造谣传谣" />
        <el-radio-button label="违法内容" />
        <el-radio-button label="其它" />
      </el-radio-group>
      <div class="content" v-show="isOther">
        <n-input v-model:value="reportContent" type="textarea" placeholder="其它" />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isReport = false">取消</el-button>
        <el-button :disabled="reportContent === ''" type="primary" @click="report()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import markdownVue from "@/components/ojComponents/markdown/markdown.vue";
import { ElMessage } from "element-plus";

import {
  addCommentAPI,
  likeCommentAPI,
  reportDiscussAPI,
} from "@/api/ojAPI/ojAPI";
import { delCommentAPI } from '@/api/adminAPI/adminAPI'
export default {
  name: "relay",
  emits: ["getReplay"],
  props: {
    commentDetail: {
      type: Object,
      default: {},
    },
  },

  data() {
    return {
      reply: false,
      likeTime: null,
      addTime: null,
      isReport: false,
      reportContent: "",
      reportType: "",
      isOther: false,
      deboundTime: null,
    };
  },
  watch: {
    reportType(newValue) {
      if (newValue === "其它") {
        this.reportContent = "";
        this.isOther = true;
      } else {
        this.reportContent = newValue;
        this.isOther = false;
      }
    },
  },
  methods: {
    //将reply修改为true
    reReplay() {
      if (this.$store.oj.isLogin) {
        this.reply = true;
      } else {
        ElMessage.error("请先登录");
        return;
      }
    },
    async delReplay() {
      let data = new FormData()
      data.append('id', this.commentDetail.id)
      await delCommentAPI(data).then(res => {
        if (res.data.code === 200) {
          this.getReplay();
        }
      })
    },
    //关闭回复
    closeReply() {
      this.reply = false;
    },
    //重新发送请求
    getReplay() {
      this.$emit("getReplay");
    },
    //修改点赞评论
    likeReplay() {
      if (this.addTime) {
        clearTimeout(this.addTime);
      }
      this.addTime = setTimeout(() => {
        this.commentDetail.isLike = !this.commentDetail.isLike;
        if (this.commentDetail.isLike) {
          this.commentDetail.likeNum += 1;
        } else {
          this.commentDetail.likeNum -= 1;
        }
        if (this.likeTime) {
          clearTimeout(this.likeTime);
        }
        this.likeTime = setTimeout(() => {
          this.likeCommentAPI();
        }, 300);
      }, 300);
    },
    //展示举报界面
    showReport() {
      if (this.$store.oj.isLogin) {
        this.isReport = true;
      } else {
        ElMessage.error("请先登录");
        return;
      }
    },
    report() {
      if (this.deboundTime) {
        clearTimeout(this.deboundTime);
      }
      this.deboundTime = setTimeout(() => {
        this.reportAPI();
      }, 300);
    },
    //举报讨论
    async reportAPI() {
      if (this.$store.oj.isLogin) {
        let data = new FormData();
        data.append("targetId", this.commentDetail.id);
        data.append("type", 2);
        data.append("content", this.reportContent);
        await reportDiscussAPI(data).then((res) => {
          if (res.data.code === 200) {
            ElMessage.warning("举报成功");
            this.isReport = false;
            this.reportContent = "";
            this.reportType = "";
            this.isOther = false;
          }
        });
      } else {
        ElMessage.error("请先登录");
        return;
      }
    },
    //点赞评论
    async likeCommentAPI() {
      let data = new FormData();
      data.append("isLike", this.commentDetail.isLike);
      data.append("commentId", this.commentDetail.id);
      data.append("type", 2);
      await likeCommentAPI(data);
    },
    //防抖添加回复
    asyncAdd() {
      if (this.$store.oj.isLogin) {
        if (this.addTime) {
          clearTimeout(this.addTime);
        }
        this.addTime = setTimeout(() => {
          this.addComment();
        }, 300);
      } else {
        ElMessage.error("请登录");
        return;
      }
    },
    //用于添加回复的
    async addComment() {
      if (this.$refs.comment.content === "") {
        ElMessage.error("请输入回复内容");
        return;
      }
      const data = {
        commentId: this.commentDetail.commentId,
        parentId: this.commentDetail.id,
        content: this.$refs.comment.content,
        discussionId: this.$route.params.discussId,
      };
      await addCommentAPI(data).then((res) => {
        if (res.data.code === 200) {
          this.getReplay();
          this.closeReply();
          this.$refs.comment.clearContent();
        }
      });
    },
  },
  components: {
    markdownVue,
  },
  mounted() { },
};
</script>

<style lang="less" scoped>
.comment {
  border-radius: 8px;
  padding: 5px 16px 0px;

  .head {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 24px;

    .head-left {
      display: flex;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 14px;
      line-height: 1.42857;
      color: rgba(38, 38, 38, 1);
      align-items: center;

      .n-avatar {
        margin-right: 10px;
      }

      .from {
        display: flex;
        margin-right: 10px;
        align-items: center;
      }

      .to {
        align-items: center;
        display: flex;
      }
    }

    .head-right {
      margin-left: auto;
      display: flex;
      -webkit-box-align: center;
      align-items: center;

      .time {
        align-items: center;
        padding: 0px;
        margin-left: 12px;
        color: rgba(191, 191, 191, 1);
      }
    }
  }

  .center {
    position: relative;
    overflow: hidden;
    margin-top: 3px;

    .center-detail {
      font-family: Helvetica, arial, sans-serif;
      font-size: 16px;
      line-height: 162%;
      word-break: break-word;
      text-align: justify;
      padding: 0px;
    }
  }

  .bottom {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;

    .bottom-button {
      margin-left: -9px;
      margin-top: 0px;
      border: none;
      padding: 0px;

      .icon {
        margin-left: 10px;
        display: flex;
        align-items: center;

        .like {
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          margin-right: 4px;

          i {
            padding: 2px;
            font-size: 11px;
            border-radius: 100%;
            color: rgba(60, 60, 67, 0.6);
          }

          span {
            color: rgba(60, 60, 67, 0.6);
            margin-left: 4px;
            font-size: 12px;
          }
        }

        .like:hover {
          cursor: pointer;

          i {
            color: rgba(224, 81, 81, 0.875);
          }

          span {
            color: rgba(224, 81, 81, 0.875);
          }
        }

        .likely {
          i {
            animation: change 1s;
            color: rgb(224, 81, 81);
          }

          span {
            color: rgb(224, 81, 81);
            transition: color 0.3 ease-in-out;
          }

          @keyframes change {
            0% {
              opacity: 0.75;
            }

            10% {
              opacity: 0.5;
            }

            20% {
              opacity: 0.25;
            }

            30% {
              opacity: 0.1;
            }

            50% {
              opacity: 0.25;
            }

            75% {
              opacity: 0.55;
            }

            100% {
              opacity: 1;
            }
          }
        }

        .repend {
          .n-button {
            color: rgba(140, 140, 140, 1);
            font-size: 12px;
            display: flex;
            -webkit-box-align: center;
            padding: 2px 5px 0 1px;
            align-items: center;

            i {
              padding: 2px;
              font-size: 12px;
              border-radius: 100%;
              color: rgba(60, 60, 67, 0.6);
            }
          }

          .n-button:hover {
            color: #36ad6a;
          }

          ::v-deep(.n-button__border) {
            border: none;
            --n-border-hover: none;
            --n-border-pressed: none;
            --n-border-focus: none;
            --n-border-disabled: none;
          }

          ::v-deep(.n-button__state-border) {
            border: none;
            --n-border-hover: none;
            --n-border-pressed: none;
            --n-border-focus: none;
            --n-border-disabled: none;
          }

          ::v-deep(.n-base-wave) {
            animation-duration: 0s;
          }
        }

        .repend:hover {
          color: #36ad6a;
        }

        .delete {
          .n-button {
            color: rgba(140, 140, 140, 1);
            font-size: 12px;
            display: flex;
            -webkit-box-align: center;
            padding: 2px 5px 0 1px;
            align-items: center;

            i {
              padding: 2px;
              font-size: 12px;
              border-radius: 100%;
              color: rgba(60, 60, 67, 0.6);
            }
          }

          .n-button:hover {
            color: #ad3a36;
          }

          ::v-deep(.n-button__border) {
            border: none;
            --n-border-hover: none;
            --n-border-pressed: none;
            --n-border-focus: none;
            --n-border-disabled: none;
          }

          ::v-deep(.n-button__state-border) {
            border: none;
            --n-border-hover: none;
            --n-border-pressed: none;
            --n-border-focus: none;
            --n-border-disabled: none;
          }

          ::v-deep(.n-base-wave) {
            animation-duration: 0s;
          }
        }

        .delete:hover {
          i {
            color: #ad3a36;
          }
        }

        .foot-info {
          color: rgba(104, 103, 103, 0.9);
          font-size: 1.1em;

          i {
            margin-right: 7px;
            font-size: 1.25em;
          }
        }

        .classic:hover {
          color: #18a058;
          cursor: pointer;
        }

        .space {
          margin-right: 3px;
          height: 12px;
          border-left-width: 1px;
          border-left-style: solid;
          border-color: rgba(0, 10, 32, 0.11);
        }
      }
    }
  }
}

.el-drawer {
  .head {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 0px 15px;
    height: 30px;

    .button {
      margin-left: auto;
      display: flex;

      .n-button {
        margin-right: 10px;
      }
    }

    .head-replay {
      margin-right: 15px;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 22px;
      color: rgba(191, 191, 191, 1);

      .replay-name {
        color: rgba(140, 140, 140, 1);
      }
    }
  }
}

::v-deep(.el-dialog) {
  border-radius: 10px;
  min-width: 420px;

  .center {
    width: 90%;
    font-size: 0.75rem;
    line-height: 1rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    .content {
      width: 100%;
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      border-color: #0000;
      outline: 2px solid #0000;
      color: rgb(38 38 38/1);
      font-size: 0.875rem;
      line-height: 1.25rem;
      border-color: #0000;
      border-width: 1px;
      border-radius: 0.5rem;
    }
  }
}

::v-deep(.n-input) {
  margin-top: 16px;
  padding: 0;
  --n-border-hover: none !important;
  --n-border-focus: none !important;
  --n-box-shadow-focus: none !important;
  --n-border: none !important;
}

::v-deep(.n-input-wrapper) {
  background-color: #000a2008;
  height: 90px;
  padding: 0.5rem 0.75rem;
}

::v-deep(.el-dialog__body) {
  padding: 0 !important;
}

::v-deep(.el-radio-button__inner) {
  border-left: none !important;
  border: none;
  color: #262626bf;
  padding: 0.5rem;
  border-radius: 0.5rem !important;
  flex-direction: column;
  cursor: pointer;
  display: flex;
  background-color: #01020508;
  --el-radio-button-checked-bg-color: #007aff14 !important;
  --el-radio-button-checked-text-color: rgb(0 122 255/1);
  box-shadow: none !important;
}

::v-deep(.el-radio-group) {
  gap: 1rem;
  flex-wrap: wrap;
  display: flex;
}

.report {
  cursor: pointer;
}

.report:hover {
  color: #18a058;
}
</style>
